import 'package:flutter/material.dart';

class FlutterLayout extends StatefulWidget {
  @override
  _FlutterLayoutState createState() => _FlutterLayoutState();
}

class _FlutterLayoutState extends State<FlutterLayout> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 布局',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter 布局开发'),
            leading: GestureDetector(
              child: Icon(Icons.arrow_back),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ),
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: _selectedIndex,
            selectedItemColor: Colors.amber[800],
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text('Home'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.school),
                title: Text('School'),
              ),
            ],
            onTap: _onItemTapped,
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: null,
            child: Icon(Icons.thumb_up),
            backgroundColor: Colors.pink,
          ),
          body: _selectedIndex == 0
              ? RefreshIndicator(
                  child: ListView(
                    children: <Widget>[
                      Container(
                        decoration: BoxDecoration(color: Colors.white),
                        alignment: Alignment.center,
                        child: Column(
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                ClipOval(
                                  child: SizedBox(
                                    width: 100,
                                    height: 100,
                                    child: Image.network(
                                        'http://www.devio.org/img/avatar.png'),
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.all(10),
                                  child: ClipRRect(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(10)),
                                    child: Opacity(
                                      opacity: 0.5,
                                      child: Image.network(
                                        'http://www.devio.org/img/avatar.png',
                                        width: 100,
                                        height: 100,
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            Container(
                              height: 100,
                              margin: EdgeInsets.all(10),
                              child: PhysicalModel(
                                color: Colors.transparent,
                                borderRadius: BorderRadius.circular(6),
                                clipBehavior: Clip.antiAlias,
                                child: PageView(
                                  children: <Widget>[
                                    _item('Swiper1', Colors.deepPurple),
                                    _item('Swiper2', Colors.green),
                                    _item('Swiper3', Colors.redAccent),
                                  ],
                                ),
                              ),
                            ),
                            Column(
                              children: <Widget>[
                                FractionallySizedBox(
                                  widthFactor: 1,
                                  child: Container(
                                    decoration: BoxDecoration(
                                        color: Colors.greenAccent),
                                    child: Text('FractionallySizedBox Class'),
                                  ),
                                )
                              ],
                            )
                          ],
                        ),
                      ),
                      Stack(
                        children: <Widget>[
                          Image.network(
                            'http://www.devio.org/img/avatar.png',
                            width: 100,
                            height: 100,
                          ),
                          Positioned(
                              left: 0,
                              bottom: 0,
                              child: Image.network(
                                'http://www.devio.org/img/avatar.png',
                                width: 36,
                                height: 36,
                              ))
                        ],
                      ),
                      Wrap(
                        spacing: 8,
                        runSpacing: 6,
                        children: <Widget>[
                          _tag('Flutter'),
                          _tag('Dart'),
                          _tag('Material-UI'),
                          _tag('React'),
                          _tag('Vue'),
                        ],
                      )
                    ],
                  ),
                  onRefresh: _handleRefresh,
                )
              : null),
    );
  }
}

Future<Null> _handleRefresh() async {
  await Future.delayed(Duration(milliseconds: 200));
  return null;
}

_item(String title, Color color) {
  return Container(
    alignment: Alignment.center,
    decoration: BoxDecoration(color: color),
    child: Text(
      title,
      style: TextStyle(fontSize: 21, color: Colors.white),
    ),
  );
}

_tag(String label) {
  return Chip(
    label: Text(label),
    avatar: CircleAvatar(
      backgroundColor: Colors.blue.shade900,
      child: Text(
        label.substring(0, 1),
        style: TextStyle(fontSize: 10),
      ),
    ),
  );
}
